"use strict";

import {loadTexture} from '../utils/glutils.js';
import Game from './game.js';

export default class Main {
	#rectx;
	#recty;
	#recth = 36;
	#rectspan = 56;
	static #instance;

	onclick = (e) => {
		let x = e.clientX;
		let y = e.clientY;
		if (x>=this.#rectx[0] && x<=this.#rectx[1]) {
			if (y>=this.#recty[0] && y<=this.#recty[0]+this.#recth) {
				// 开始
				//console.log('开始');
				Game.getInstance().display();
			} else if (y>=this.#recty[1] && y<=this.#recty[1]+this.#recth) {
				// 关于
				//console.log('关于');
				alert('你好');
			}
		}
	};

	static getInstance() {
		if (!Main.#instance)
			Main.#instance = new Main();
		return Main.#instance;
	}

	constructor() {
		this.#rectx = [cw-48, cw+48];
		this.#recty = [ch-18, ch+38];
		
		this.array = new Float32Array([
			cw-94, 56,    0,0.28125,
			cw+94, 56,    0.734375,0.28125,
			cw+94, 102,   0.734375,0.4609375,
			cw-94, 102,   0,0.4609375,
			this.#rectx[0], this.#recty[0], 0, 0,
			this.#rectx[0], this.#recty[0]+this.#recth, 0, 0.140625,
			this.#rectx[1], this.#recty[0]+this.#recth, 0.375, 0.140625,
			this.#rectx[1], this.#recty[0], 0.375, 0,
			this.#rectx[0], this.#recty[1], 0, 0.140625,
			this.#rectx[0], this.#recty[1]+this.#recth, 0, 0.28125,
			this.#rectx[1], this.#recty[1]+this.#recth, 0.375, 0.28125,
			this.#rectx[1], this.#recty[1], 0.375, 0.140625,
		]);
		//gl.mvp = mat4.create();
		//gl.bufferData(gl.ARRAY_BUFFER, this.array, gl.STATIC_DRAW);
		this.init();
	}

	init() {
		const tex = gl.createTexture();
		const usamp = gl.getUniformLocation(gl.program, 'u_samp');
		let logo = new Image();
		logo.onload = ()=>{
			loadTexture(gl, tex, logo, usamp);
			this.display();
		};
		logo.src = './src/texture.webp';
	}

	display() {
		gl.clear(gl.COLOR_BUFFER_BIT);
		gl.bufferData(gl.ARRAY_BUFFER, this.array, gl.DYNAMIC_DRAW);
		gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
		gl.drawArrays(gl.TRIANGLE_FAN, 4, 4);
		gl.drawArrays(gl.TRIANGLE_FAN, 8, 4);
		gl.canvas.onmyclick = this.onclick;
		gl.canvas.ontouchmove = null;
	}
}
